<template>
	<view class="container">
		<view class="time">
			<uni-row>
				<uni-col :span="20">
					<picker mode="date" :value="date" @change="bindDateChange" :start="startDate" :end="endDate"
						fields="month">
						<view style="margin-left: 20%;">{{ date }}</view>
					</picker>

				</uni-col>
				<uni-col :span="4">
					<image src="../../../static/riqinui.png" style="width: 30px;height: 30px;margin-top: 12%;">
					</image>
				</uni-col>
			</uni-row>
		</view>

		<view class="table">
			<view style="display: flex;justify-content: space-between;">
				<view style="margin: 15px 15px 5px 15px;font-weight: 600;font-size: 15px;color: #25406e">
					<text>环比分析</text>
				</view>
			</view>
			<text style="margin-left: 15px;font-size: 10px;display: flex;color: #a7a7a7;font-weight: 600;">进店新客流占比 <text
					style="color: #515a9c">75%</text> 进店回头客流占比 <text style="color: #515a9c">10%</text></text>
			<view class="customer">
				<view
					style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
					<text style="color: #193566;font-weight: 800;font-size: 14px;">总客流</text>
					<text
						style="color: #193566;font-weight: 800;font-size: 25px;">{{briefingData[0].totalPassengerFlow || 0}}</text>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
					</view>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">上月总客流：</text>
						<text
							style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].totalPassengerFlow || 0}}</text>
					</view>
				</view>
				<view style="width: 1rpx; height: 60px; background: #dcdde4; margin-top: 40px;"></view>
				<view
					style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
					<text style="color: #193566;font-weight: 800;font-size: 14px;">进店新客流</text>
					<text
						style="color: #193566;font-weight: 800;font-size: 25px;">{{briefingData[0].inboundNewFlow || 0}}</text>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
					</view>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">上周新客流：</text>
						<text
							style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].inboundNewFlow || 0}}</text>
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-around;">
				<view style="width: 30%;height: 1px; background: #dcdde4;"></view>
				<view style="width: 30%;height: 1px; background: #dcdde4;"></view>
			</view>

			<view class="customer1">
				<view
					style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
					<text style="color: #193566;font-weight: 800;font-size: 14px;">进店回头客流</text>
					<text
						style="color: #193566;font-weight: 800;font-size: 25px;">{{briefingData[0].inboundLaterFlow || 0}}</text>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
					</view>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">上周回头客流：</text>
						<text
							style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].inboundLaterFlow || 0}}</text>
					</view>
				</view>
				<view style="width: 1rpx; height: 60px; background: #dcdde4; margin-top: 30px;"></view>
				<view
					style="width: 50%;height: 100%;display: flex;flex-direction: column;align-items: center;margin-top: 20px;">
					<text style="color: #193566;font-weight: 800;font-size: 14px;">去重客流</text>
					<text
						style="color: #193566;font-weight: 800;font-size: 25px;">{{briefingData[0].passFlow || 0}}</text>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">变化率：</text>
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">50%</text>
					</view>
					<view style="display: flex;justify-content: space-between;width: 90px;margin-left: 10px;">
						<text style="color: #b4b4b4;font-weight: 800;font-size: 10px">上周过店客流：</text>
						<text
							style="color: #b4b4b4;font-weight: 800;font-size: 10px">{{briefingData[1].passFlow || 0}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="table-figure">
			<weekPortrait ref="mySon" />
		</view>
		<view class="table-figure1">
			<activeLevel ref="mySon1" />
		</view>
		<view class="table-figure2">
			<guest ref="mySon2" />
		</view>
		<tabBar></tabBar>
	</view>
</template>

<script>
	import {
		findShopStatistics
	} from '@/network/report.js';
	import {
		color
	} from "echarts";
	import weekPortrait from "./weekPortrait.vue"
	import activeLevel from "./activeLevel.vue"
	import guest from "./guest.vue"

	function getDate(type) {
		const date = new Date();

		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		// let day = date.getDate();

		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		// day = day > 9 ? day : '0' + day;

		return `${year}-${month}`;
	}
	export default {
		components: {
			weekPortrait,
			activeLevel,
			guest
		},
		data() {
			return {
				current: {
					organId: uni.getStorageSync('organId'),
				},
				briefingData: {},
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),

			}
		},
		created() {
			uni.setStorageSync("startTime", this.date);
			this.trafficBriefing();
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.detail.value;
				uni.setStorageSync("startTime", this.date);
				this.current.monthlyDate = this.date
				this.trafficBriefing();
				this.$refs.mySon.getServerData();
				this.$refs.mySon1.getServerData();
				this.$refs.mySon2.getServerData();
			},
			trafficBriefing() {
				this.current.monthlyDate = this.date
				findShopStatistics(this.current).then(res => {
					const code = res.data.code;
					if (code === 200) {
						this.briefingData = res.data.result
					} else {
						uni.showToast({
							title: res.data.message
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			}
		}
	}
</script>

<style>
	.container {
		/* height: 100vh; */
		display: flex;
		flex-direction: column;
		background: #f0f2fa;
		align-items: center;
	}

	/* 	.img-wrap {
		height: 30%;
		text-align: center;
		background: #333d8b;
		background-image: url('../../static/yd.png');
		background-size: 100% 100%;
	} */

	/* 	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
	} */

	.time {
		width: 90%;
		height: 45px;
		background: #fff;
		margin-top: 3%;
		border-radius: 10px;
		line-height: 45px;
		text-align: center;
	}

	.table {
		width: 90%;
		height: 300px;
		background: #fff;
		margin-top: 5%;
		border-radius: 10px;

	}

	.table-figure {
		width: 90%;
		height: 360px;
		background: #fff;
		margin-top: 2%;
		border-radius: 10px;

	}

	.table-figure1 {
		width: 90%;
		height: 330px;
		background: #fff;
		margin-top: 2%;
		border-radius: 10px;

	}

	.table-figure2 {
		width: 90%;
		height: 350px;
		background: #fff;
		margin-top: 2%;
		border-radius: 10px;

	}

	.customer {
		height: 124px;
		display: flex;
		justify-content: space-between;
	}

	.customer1 {
		height: 124px;
		display: flex;
		justify-content: space-between;
	}
</style>